<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top">
			<view class="bg"></view>
			<view class="base-info">
				<view class="cover" @click="goToContent(data.id)">
					<image :src="data.cover_200" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="title">
						<view class="name" @click="goToContent(data.id)">
							{{data.name}}
						</view>
						<view class="follow" v-if="!follow">
							<button type="default" size="mini" class="follow-button" hover-class="button-hover" @click="followTeacher()">+ 关注</button>
						</view>
						<view class="follow" v-else>
							<button type="default" size="mini" class="unfollow-button" hover-class="none" @click="followTeacher()"> 已关注</button>
						</view>
					</view>
				</view>
			</view>
			<view class="description text-ellipsis-2" @click="goToContent(data.id)">
				{{data.description}}
			</view>
			
			<view class="list-section" v-if="loading == false">
				<view v-if="data.knowledge_count > 0">
					<KnowledgeList title="课程列表组件" type="knowledge_list" :params="knowledgeListParams" :config="config" />
				</view>
				<view v-if="data.column_count > 0">
					<ColumnList title="专栏列表组件" type="column_list" :params="columnListParams" :config="config" />
				</view>
				<view v-if="data.livecourse_count >0">
					<LiveList title="直播课堂列表组件" type="live_list" :params="liveListParams" :config="config" />
				</view>
				<view v-if="data.offline_count > 0">
					<OfflineList title="线下课列表组件" type="offline_list" :params="offlineListParams" :config="config" />
				</view>
				<view v-if="data.material_count > 0">
					<MaterialList title="资料下载列表组件" type="material_list" :params="materialListParams" :config="config" />
				</view>
				<view v-if="data.exam_paper_count > 0">
					<ExamPaperList title="题库考试列表组件" type="exam_paper_list" :params="examPaperListParams" :config="config" />
				</view>
				<template v-if="config">
					<CopyRight :config="config" />
				</template>
			</view>
		</view>
		<!--登录框-->
		<Login ref="login" :config="config" @getUserInfo="getUserInfo"/>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import ColumnList from '@/common/diys/ColumnList/ColumnList.vue' //专栏列表组件
	import KnowledgeList from '@/common/diys/KnowledgeList/KnowledgeList.vue' //课程列表组件
	import LiveList from '@/common/diys/LiveList/LiveList.vue' //直播课堂列表组件
	import MaterialList from '@/common/diys/MaterialList/MaterialList.vue' //资料下载列表组件
	import OfflineList from '@/common/diys/OfflineList/OfflineList.vue' //线下课列表组件
	import ExamPaperList from '@/common/diys/ExamPaperList/ExamPaperList.vue' //题库试卷列表组件
	
	import CopyRight from '../common/copyRight.vue' //自定义版权
	
	export default {
		
		components: {
			ColumnList,
			KnowledgeList,
			LiveList,
			MaterialList,
			OfflineList,
			ExamPaperList,
			CopyRight,
		},
		data() {
			return {
				loading: true, // 加载中
				urlParams: {},
				data: {}, // 老师数据
				teacherUid: 0, // 老师uid
				follow: false, // 是否已关注老师
				knowledgeListParams: {}, // 点播课列表
				columnListParams: {}, // 专栏列表
				liveListParams: {}, // 直播列表
				offlineListParams: {}, // 线下课列表
				materialListParams: {}, // 资料列表
				examPaperListParams: {}, // 试卷列表
			}
		},
		onReady() {
			console.log('onReady')
			
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    await this.$onLaunched;
			this.urlParams = option
			//通过小程序码进入的获取参数
			if(option.scene){
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				let scene = decodeURIComponent(option.scene); 
				let obj = {};
				for (var i = 0; i < scene.split('*').length;i++){
				  var arr = scene.split('*')[i].split('/');
				  obj[arr[0]] = arr[1];
				}
			
				this.urlParams.id = obj.id
				this.urlParams.promoter_uid = obj.u
				//console.log(this.urlParams,'scene')
			}
			
			if(this.urlParams.promoter_uid){
				uni.setStorageSync('promoter_uid',this.urlParams.promoter_uid)
			}
			
			Promise.all([
				this.getData(),
				this.getKnowledgeList(),
				this.getColumnList(),
				this.getLiveList(),
				this.getOfflineList(),
				this.getMaterialList(),
				this.getExamPaperList()
			]).then(res => {
				// H5端分享设置
				//#ifdef H5
				let url = window.location.href
				
				let shareData = {
					title : this.data.name,
					desc : this.data.description,
					img: this.data.cover_200
				}
				console.log(shareData)
				this.wechat.share(shareData,url)
				//#endif
				// 执行查询是否关注了该老师
				this.isfollow()
			}).then(res => {
				//加载完成
				this.loading = false
			})
		},
		created() {
			this.setNavigation(this.config.style)
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			/**
			 * 获取课程详情数据
			 */
			getData: function(){

				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.id = params.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/teacher'
						//#endif
						//#ifdef H5
						url = 'entry/site/teacher'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								that.teacherUid = res.data.data.uid
							}
							resolve(res.data)
						},
						fail: function(){
						}
					})
				})
				
			},
			
			/**
			 * 进入详细介绍页
			 */
			goToContent: function(id){
				let urlParams = 'id='+id
				let url = 'content?' + urlParams
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			/**
			 * 查询是否已关注该老师
			 */
			isfollow() {
				let that = this
				let data = {}
					data.action = 'isfollow_teacher'
					data.m = 'muu_classroom'
					data.teacher_id = this.data.id
					
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/follow'
					//#endif
					//#ifdef H5
					url = 'entry/site/follow'
					//#endif
				// 发起请求
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							console.log(res.data)
							that.follow = true;
						}else{
							that.follow = false;
						}
					}
				})
			},
			
			/**
			 * 关注老师
			 */
			followTeacher() {
				let that = this
				let data = {}
					data.action = 'follow_teacher'
					data.m = 'muu_classroom'
					data.teacher_id = this.data.id
					
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/follow'
					//#endif
					//#ifdef H5
					url = 'entry/site/follow'
					//#endif
				// 发起请求
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg,
								duration: 2000
							});
							that.isfollow()
						}
						if (res.data.code == 0 && res.data.data == 'login') {
							//触发登录框
							that.$refs.login.loginDialog()
						}
					},
					error() {
						uni.showToast({
							icon: 'none',
							title: '网络错误',
							duration: 2000
						});
					}
				})
			},
			
			/**
			 * 获取点播课列表
			 */
			getKnowledgeList: function(){
				let that = this
				
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.teacher_id = this.urlParams.id
					
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/knowledge'
					//#endif
					//#ifdef H5
					url = 'entry/site/knowledge'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.knowledgeListParams.title = '课程'
								that.knowledgeListParams.rows = res.data.data.per_page
								that.knowledgeListParams.category_id = 0
								that.knowledgeListParams.teacher_id = data.teacher_id
								that.knowledgeListParams.list = res.data.data.data
								that.knowledgeListParams.style = 0
								console.log(that.knowledgeListParams)
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取专栏列表
			 */
			getColumnList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.teacher_id = this.urlParams.id
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/column'
					//#endif
					//#ifdef H5
					url = 'entry/site/column'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.columnListParams.title = '专栏'
								that.columnListParams.rows = res.data.data.per_page
								that.columnListParams.category_id = 0
								that.columnListParams.teacher_id = data.teacher_id
								that.columnListParams.list = res.data.data.data
								that.columnListParams.style = 0
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取直播列表
			 */
			getLiveList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					
					data.page = 1
					data.rows = 4
					data.teacher_id = this.urlParams.id
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/livecourse'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/live'
					data.m = 'muu_classroom_plugin_livecourse'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.liveListParams.title = '直播'
								that.liveListParams.rows = res.data.data.per_page
								that.liveListParams.category_id = 0
								that.liveListParams.teacher_id = data.teacher_id
								that.liveListParams.list = res.data.data.data
								that.liveListParams.style = 0
							}
							resolve(res.data)
						}
					})
				})
				
			},
			
			/**
			 * 获取线下课列表
			 */
			getOfflineList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.teacher_id = this.urlParams.id
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/offline'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/offline'
					data.m = 'muu_classroom_plugin_offline'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.offlineListParams.title = '线下课'
								that.offlineListParams.rows = res.data.data.per_page
								that.offlineListParams.category_id = 0
								that.offlineListParams.teacher_id = data.teacher_id
								that.offlineListParams.list = res.data.data.data
								that.offlineListParams.style = 0
							}
							resolve(res.data)
						}
					})
				})	
			},
			
			/**
			 * 获取资料下载列表
			 */
			getMaterialList() {
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.teacher_id = this.urlParams.id
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/material'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/material'
					data.m = 'muu_classroom_plugin_material'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.materialListParams.title = '资料'
								that.materialListParams.rows = res.data.data.per_page
								that.materialListParams.category_id = 0
								that.materialListParams.teacher_id = data.teacher_id
								that.materialListParams.list = res.data.data.data
								that.materialListParams.style = 0
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取题库考试列表
			 */
			getExamPaperList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.teacher_id = this.urlParams.id
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/exam'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/paper'
					data.m = 'muu_classroom_plugin_exam'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.examPaperListParams.title = '题库'
								that.examPaperListParams.rows = res.data.data.per_page
								that.examPaperListParams.category_id = 0
								that.examPaperListParams.teacher_id = data.teacher_id
								that.examPaperListParams.list = res.data.data.data
								that.examPaperListParams.style = 0
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				this.util.getUserInfo((res)=>{
					console.log('userInfo',res)
					let userInfo = uni.getStorageSync('userInfo') || {}
					that.userInfo = userInfo
					that.getApiUserInfo()
					this.$emit('getData')
				})
			},
			
			/**
			 * 获取用户详情数据
			 */
			getApiUserInfo: function(){
				let that = this
				let data = {}
					data.action = 'user_info'
					data.m = 'muu_classroom'
				//动态获取用户数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.userInfo.sessionid = that.userInfo.sessionid
							that.userInfo.memberInfo = res.data.data
							uni.setStorageSync('userInfo', that.userInfo)
							console.log(that.userInfo)
						}
						//结束下拉刷新
						uni.stopPullDownRefresh();
					}
				})
			},
			
			/**
			 * @param {Object} style
			 */
			setNavigation(style) {
				let that = this
				//动态更改顶部状态栏演示
				let backgroundColor = '#ffffff'
				//console.log(this.config)
				if(style == 'Green'){
					backgroundColor = '#00ce74';
				}
				if(style == 'Blue'){
					backgroundColor = '#03b8cf';
				}
				if(style == 'LightRed'){
					backgroundColor = '#ea644a';
				}
				if(style == 'Orange'){
					backgroundColor = '#ff9900';
				}
				if(style == 'LightPink'){
					backgroundColor = '#ffb6c1';
				}
				if(style == 'Magenta'){
					backgroundColor = '#8666b8';
				}
				//更改小程序原生导航栏
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: backgroundColor,
				})
			}

		},
		onReachBottom() {
			console.log('页面滚动到底部')
		},
		
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			// 分享(分销)用户ID
			let userInfo = '';
			if(this.userInfo){
				userInfo = this.userInfo.memberInfo || {}
			}
			console.log(userInfo)
			let url = '/muu_classroom/pages/teacher/detail?' + 'id=' + this.data.id
			if(userInfo.hasOwnProperty("uid") && userInfo.uid !== undefined){
				url = url + '&promoter_uid=' + userInfo.uid
			}
			console.log(url)
			let share = {
				title : this.data.name,
				path : url,
				desc : this.data.description,
				success : function(res){
					
				},
			}
			
			return share
		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	/* #ifdef MP */
	.bg {
		height: 80rpx;
		background-color: #fff;
	}
	/* #endif */
	.base-info {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		/* #ifdef MP */
		height: 60rpx;
		/* #endif */
		.cover {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			overflow: hidden;
			/* #ifdef MP */
			top: -80rpx;
			/* #endif */
			image {
				width: 160rpx;
				height: 160rpx;
				display: block;
				border-radius: 50%;
			}
		}
		.info {
			flex: 1;
			position: relative;
			padding: 0 20rpx;
			.title {
				display: flex;
				margin-top: 50rpx;
				/* #ifdef MP */
				margin-top: 12rpx;
				/* #endif */
				.name {
					flex: 1;
					font-size: 36rpx;
					font-weight: 600;
					line-height: 66rpx;
					color: #000;
				}
				.follow {
					width: 180rpx;
					.follow-button {
						width: 180rpx;
						color: #fff;
						&::after {
							border: 0;
						}
					}
					.unfollow-button {
						width: 180rpx;
						color: #666;
						&::after {
							border: 0;
						}
					}
				}
			}
		}
	}
	.description {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		height: 126rpx;
		color: #999;
		box-sizing: border-box;
	}
	
	.list-section {
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
	}

	/*页面风格设计*/
	.Blue {
		/* #ifdef MP */
		.bg {
			background-color: $Blue;
		}
		/* #endif */
		.follow-button {
			background-color: $Blue;
		}
		.button-hover {
			background-color: $Blue-hover;
		}
	}
	.Green {
		/* #ifdef MP */
		.bg {
			background-color: $Green;
		}
		/* #endif */
		.follow-button {
			background-color: $Green;
		}
		.button-hover {
			background-color: $Green-hover;
		}
	}
	.LightRed {
		/* #ifdef MP */
		.bg {
			background-color: $LightRed;
		}
		/* #endif */
		.follow-button {
			background-color: $LightRed;
		}
		.button-hover {
			background-color: $LightRed-hover;
		}
	}
	.Orange {
		/* #ifdef MP */
		.bg {
			background-color: $Orange;
		}
		/* #endif */
		.follow-button {
			background-color: $Orange;
		}
		.button-hover {
			background-color: $Orange-hover;
		}
	}
	.LightPink {
		/* #ifdef MP */
		.bg {
			background-color: $LightPink;
		}
		/* #endif */
		.follow-button {
			background-color: $LightPink;
		}
		.button-hover {
			background-color: $LightPink-hover;
		}
	}
	.Magenta {
		/* #ifdef MP */
		.bg {
			background-color: $Magenta;
		}
		/* #endif */
		.follow-button {
			background-color: $Magenta;
		}
		.button-hover {
			background-color: $Magenta-hover;
		}
	}

	

</style>
